<template>
	<view class="p-top30 p-bot30" :style="{'--color':color}">
		<!-- #ifdef MP-WEIXIN -->
		<navBar :bgMake="5" :Color="2" title="修改资料"></navBar>
		<!-- #endif -->
		<view class="Content" v-if="listData.length">

			<block v-for="(item,index) in listData" :key="index">
				<view class="list">
					<view class="Title" v-if="item.name">{{item.name}}</view>
					<block v-for="(sItem,sIndex) in item.list" :key="sIndex">
						<view class="headBox flexac" v-if="sItem.vpType == 7">
							<view class="v_head m-top50 m-bot20" @click="UploadImg(index,sIndex)">
								<image :src="$imgUrls(sItem.value)" mode="aspectFill" class="wh"></image>
								<view class="changeHead">更换{{sItem.vpName}}</view>
							</view>
						</view>

						<view class="Li bot" v-if="sItem.vpType == 1">
							<text class="Li_title">{{sItem.vpName}}</text>
							<input type="text" class="Li_contentInput" v-model="sItem.value"
								:placeholder="`请输入${sItem.vpName}`" @blur="changVal($event,sItem)" />
							<view class="iconfont icon-a-zujian7 color_cc h6"></view>
						</view>

						<picker mode="selector" :range="sItem.vpValue" :value="sItem.arrIndex"
							@change="Picker($event,index,sIndex,sItem)" class="LiPick" v-if="sItem.vpType == 2">
							<view class="Li bot">
								<text class="Li_title">{{sItem.vpName}}</text>
								<view class="Li_content">{{sItem.value?sItem.value:'请选择'}}</view>
								<view class="iconfont icon-a-zujian7 color_cc h6"></view>
							</view>
						</picker>

						<view class="rows bot" v-if="sItem.vpType == 3">
							<view class="Li">
								<text class="Li_title">{{sItem.vpName}}</text>
								<input type="text" class="Li_contentInput" v-model="sItem.value"
									:placeholder="`请输入${sItem.vpName}`" @blur="changVal($event,sItem)" />
								<view class="iconfont icon-a-zujian7 color_cc h6"></view>
							</view>
						</view>

						<view class="row f-column p-bot20" v-if="sItem.vpType == 4">
							<text class="Li_title m-top20">{{sItem.vpName}}</text>
							<view class="row">
								<view class="pecul" v-for="(pItem,pIndex) in sItem.value.split(',')" :key="pIndex">
									{{pItem}}
								</view>
								<view class="addPecul" @click.stop="PopMore(index,sIndex)">
									<view class="iconfont icon-tianjia h6 white"></view>
								</view>
							</view>
						</view>

						<picker mode="date" @change="Picker($event,index,sIndex,sItem)" class="LiPick"
							v-if="sItem.vpType == 5">
							<view class="Li bot">
								<text class="Li_title">{{sItem.vpName}}</text>
								<view class="Li_content">{{sItem.value?sItem.value:'请选择'}}</view>
								<view class="iconfont icon-a-zujian7 color_cc h6"></view>
							</view>
						</picker>

						<view class="Li bot" @click="showAddPicker(index,sIndex,sItem)" v-if="sItem.vpType == 6">
							<text class="Li_title">{{sItem.vpName}}</text>
							<view class="Li_content">{{sItem.value?sItem.value:'请选择'}}</view>
							<view class="iconfont icon-a-zujian7 color_cc h6"></view>
						</view>

						<view class="Photos" v-if="sItem.vpType == 8">
							<view class="row">
								<view class="rowList" v-for="(imgItem,Imgindex) in sItem.value" :key="Imgindex">
									<view class="LitImg" @click="$ImageNum(Imgindex,sItem.value)">
										<image :src="$imgUrls(imgItem)" mode="aspectFill" class="wh bor_radius_10">
										</image>
										<view class="iconfont icon-shanchu1 color size46"
											@click.stop="DelImg(index,sIndex,Imgindex)">
										</view>
									</view>
								</view>
								<view class="rowList" @click="UploadPhoto(index,sIndex)" v-if="sItem.value.length < 9">
									<view class="LitImg flexac">
										<view class="iconfont icon-tianjia color_f2 size100"></view>
									</view>
								</view>
							</view>
						</view>

					</block>

				</view>







			</block>
		</view>


		<view v-if="show">
			<u-popup :show="show" @close="close" round="10">
				<view class="PopUp">
					<text class="row j-centert black size32 bold">{{pageData[Index].vpName}}</text>
					<view class="row m-top30 p-bot50">
						<block v-for="(item,index) in pageData[Index].vpValue" :key="index">
							<view class="popList" @click.stop="selectINT(item)"
								:class="{'popActive':pageData[Index].value.indexOf(item) != -1}">{{item}}</view>
						</block>
					</view>
				</view>
			</u-popup>
		</view>

		<Load v-if="!listData.length"></Load>
		<mpvue-city-picker :shixian2='shixian2' ref="mpvueCityPicker_" :pickerValueDefault="cityPickerValueDefault"
			@onConfirm="onConfirm" @onCancel='shixian2 = false'>
		</mpvue-city-picker>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutationsf
	} from 'vuex';
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				show: false,
				cityPickerValueDefault: [0, 0, 0], // 默认选择地址
				shixian2: false,
				pageData: [],
				listData: [],

				Index: 0,
				showadd: [],
			}
		},
		onLoad() {
			this.user_edit_info();
		},

		methods: {
			user_edit_info() {
				this.$http.get({
					url: '/WeddingApi/user_edit_info',
				}).then(res => {
					if (res.code != 200) return this.$Toast(res.msg);
					const result = res.data.list;
					result.forEach(item => {
						if (item.list) {
							item.list.forEach(sItem => {
								if (sItem.vpType == 2 && sItem.value) {
									sItem.arrIndex = sItem.vpValue.findIndex(n => n == sItem
										.value);
								}
								if (sItem.vpType == 4) {
									sItem.valueList = sItem.value.split(',');
								}
							})
						}
					})
					this.listData = result;
				})
			},

			changVal(e, item) {
				if (!e.detail.value) return;
				this.edit_base_info(item);
			},

			Picker(e, index, sIndex, sItem) {
				let that = this;
				let every = e.detail.value;
				if (sItem.vpType == 2) this.listData[index].list[sIndex].value = this.listData[index].list[sIndex].vpValue[
					every];
				if (sItem.vpType == 5) this.listData[index].list[sIndex].value = every;

				that.edit_base_info(sItem);
			},

			showAddPicker(index, sIndex, sItem) {
				this.showadd = [index, sIndex];
				if (sItem.code.length > 1) {
					sItem.code.forEach((result, currt) => {
						this.cityPickerValueDefault[currt] = Number(result);
					})
				}
				this.shixian2 = true;
			},

			onConfirm(e) {
				this.shixian2 = false;
				var add = e.label.replace(/-/g, '/');
				this.listData[this.showadd[0]].list[this.showadd[1]].value = add;
				this.listData[this.showadd[0]].list[this.showadd[1]].code = e.value;
				const result = this.listData[this.showadd[0]].list[this.showadd[1]];
				this.edit_base_info(result);
			},
			UploadImg(index, sIndex) {
				let that = this;
				uni.chooseImage({
					count: 1,
					success(res) {
						const tempFilePaths = res.tempFilePaths[0];
						// #ifdef MP-WEIXIN
						wx.cropImage({
							src: tempFilePaths,
							cropScale: '1:1',
							success(res2) {
								that.uploadFile(res2.tempFilePath, index, sIndex);
							},
						})
						// #endif

						// #ifdef H5
						that.uploadFile(tempFilePaths, index, sIndex);
						// #endif
					},
				})
			},

			uploadFile(tempFilePath, index, sIndex) {
				this.$common.uploadFile(tempFilePath).then(res => {
					this.listData[index].list[sIndex].value = res.url.substring(22, res.url.length);
					this.edit_base_info(this.listData[index].list[sIndex]);
				})
			},

			async UploadPhoto(index, sIndex) {
				let num = 9 - this.listData[index].list[sIndex].value.length;;
				const Photo = await this.$common.chooseImage(num);
				if (!Photo.length) return;
				this.listData[index].list[sIndex].value = this.listData[index].list[sIndex].value.concat(Photo);
				this.edit_base_info(this.listData[index].list[sIndex]);
			},
			DelImg(index, sIndex, Imgindex) {
				this.listData[index].list[sIndex].value.splice(Imgindex, 1);
				this.edit_base_info(this.listData[index].list[sIndex]);
			},
			PopMore(index, sIndex) {
				this.pageData = this.listData[index].list;
				this.Index = sIndex
				this.show = true;
			},
			selectINT(item) {
				const Flag = this.pageData[this.Index].valueList.includes(item);
				if (Flag) {
					let soury = this.pageData[this.Index].valueList.findIndex((n) => n == item);
					this.pageData[this.Index].valueList.splice(soury, 1)
				} else {
					this.pageData[this.Index].valueList.push(item)
				}
				this.pageData[this.Index].value = this.pageData[this.Index].valueList.join(',')
			},
			close() {
				this.edit_base_info(this.pageData[this.Index]);
				this.show = false;
			},
			edit_base_info(item) {
				let that = this;
				const Data = [item];
				that.$http.post({
					url: '/WeddingApi/edit_base_info',
					data: {
						property: JSON.stringify(Data)
					}
				}).then(res => {
					if (res.code != 200) return that.$Toast(res.msg);
				})
			},
		},
		computed: {
			...mapState(['color'])
		}
	}
</script>
<style lang="scss">
	page {
		background-color: $pageBg;
	}
</style>
<style lang="scss" scoped>
	.Content {
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.list {
		width: 690rpx;
		margin: 0 auto 24rpx auto;
		background-color: #ffffff;
		padding: 30rpx;
		border-radius: 20rpx;
	}

	.Title {
		position: relative;
		padding-left: 24rpx;
		color: #000;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.Title::after {
		content: '';
		width: 8rpx;
		height: 36rpx;
		background-color: var(--color);
		border-radius: 4rpx;
		overflow: hidden;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(0, -50%);
	}

	.contcat {
		color: var(--color);
		border: 1px solid var(--color);
		border-radius: 30rpx;
		padding: 4rpx 20rpx;
		font-size: 20rpx;
	}

	.headBox {
		width: 100%;

	}

	.v_head {
		width: 300rpx;
		height: 300rpx;
		border-radius: 16rpx;
		overflow: hidden;
		position: relative;
		transform: translateY(0);
	}

	.changeHead {
		background-color: var(--color);
		padding: 4rpx 12rpx;
		color: #ffffff;
		font-size: 20rpx;
		position: absolute;
		top: 4rpx;
		right: 4rpx;
		border-radius: 20rpx;
	}

	.LiPick {
		width: 100%;
		height: 88rpx;
	}

	.Li {
		width: 100%;
		height: 88rpx;
		display: flex;
		align-items: center;

	}

	.Li_title {
		color: #333;
		font-size: 30rpx;
	}

	.Li_content {
		flex: 1;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		color: #333;
		font-size: 30rpx;
		text-align: right;
	}

	.Li_contentInput {
		flex: 1;
		height: 100%;
		color: #333;
		font-size: 30rpx;
		text-align: right;
	}

	.icon-a-zujian7 {
		padding-left: 10rpx;
	}

	.Photos,
	.textarea {
		width: 100%;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		position: relative;
		box-sizing: border-box;
	}

	.rowList {
		width: 30%;
		margin-right: 4.8%;
	}

	.rowList:nth-child(3n) {
		margin-right: 0;
	}

	.LitImg {
		width: 180rpx;
		height: 180rpx;
		border-radius: 20rpx;
		margin-top: 30rpx;
		position: relative;
	}

	.LitImg::after,
	.textarea_txt::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		border: 1px solid #cccccc;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		width: 200%;
		height: 200%;
		transform: scale(0.5);
		-webkit-transform: scale(0.5);
		transform-origin: left top;
		-webkit-transform-origin: left top;
		border-radius: 20rpx;
	}

	.icon-shanchu1 {
		position: absolute;
		background-color: #ffffff;
		top: -12rpx;
		right: -12rpx;
		z-index: 10;
		border-radius: 50%;
	}

	.TipBox {
		width: 690rpx;
		margin: 0 auto;
		border-radius: 20rpx;
		padding: 20rpx;
		background-color: #fef1f8;
		color: #e29ab1;
		font-size: 22rpx;
	}

	.pecul {
		padding: 0 20rpx;
		height: 46rpx;
		border-radius: 30rpx;
		background-color: #ff8d44;
		color: #ffffff;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		margin-right: 20rpx;
	}

	.addPecul {
		padding: 0 30rpx;
		height: 46rpx;
		background-color: #ff8d44;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		color: #ffffff;
	}

	.popList {
		padding: 10rpx 24rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
		background-color: #f2f2f2;
		margin-top: 20rpx;
		margin-left: 30rpx;
	}

	.popActive {
		color: #ffffff;
		background-color: #ff8d44;
	}

	.PopUp {
		width: 100%;
		padding: 30rpx 0 40rpx 0;
		display: flex;
		flex-direction: column;
	}
</style>